<template>
	<view class="newBox">
		<view class="itemBox">
			<view class="itemBox-item" v-for="(item,index) in itemList" :key="index" @click="itemClick(item)">
				<view class="itemBox-item-one">
					<view class="errorText">{{item.text}}</view>
					<view class="errorD" v-if="!item.status">
						<view class="dian"></view>
					</view>
				</view>
				<view class="itemBox-item-two">
					<view class="code">{{item.code}}</view>
					<view class="time">{{item.time}}</view>
				</view>
			</view>

		</view>



		<up-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		nextTick,
		watch,
		getCurrentInstance,
		defineProps
	} from 'vue'
	const props = defineProps({
		fackList: Array,
		fackObj: Object
	});
	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	const itemList = ref([])
	let status = reactive('loadmore')
	const loadingText = ref('努力加载中')
	const loadmoreText = ref('轻轻上拉')
	const nomoreText = ref('没有更多了')
	const listQuery = reactive({
		pageNum: 1,
		pageSize: 8
	})
	const getList = () => {
		setTimeout(() => {
			itemList.push({

				text: `此设备电流异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年6月12日 17:00:19',
				status: 0
			}, {

				text: `此设备电流异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年6月15日 18:02:59',
				status: 0
			}, {

				text: `此设备电压存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年6月14日 13:12:00',
				status: 0
			}, {

				text: `此设备电压存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年6月10日 19:00:18',
				status: 0
			}, {

				text: `此设备电压存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年6月9日 12:00:29',
				status: 0
			}, {

				text: `此设备存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年5月31日 18:00:59',
				status: 0
			}, {

				text: `此设备存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年5月30日 14:00:32',
				status: 0
			}, {

				text: `此设备存在异常，请及时查看!`,
				code: `${itemObj.transformerSn}`,
				time: '2024年5月25日 13:00:42',
				status: 0
			}, )
		}, 2000)
	}


	const itemClick = (it) => {

		if (!it.status) {
			itemList.value.map((item, index) => {
				if (it.code === item.code) {
					it.status = 1
				}
			})
		}

	}

	function nowDate() {
		var getTime = new Date().getTime(); //获取到当前时间戳
		var time = new Date(getTime); //创建一个日期对象
		var year = time.getFullYear(); // 年
		var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
		var date = time.getDate().toString().padStart(2, '0'); // 日
		var hour = time.getHours().toString().padStart(2, '0'); // 时
		var minute = time.getMinutes().toString().padStart(2, '0'); // 分
		var second = time.getSeconds().toString().padStart(2, '0'); // 秒
		return (
			year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
		)
	}


	onReachBottom(() => {



		status = 'loading';
		listQuery.pageNum = ++listQuery.pageNum;
		
		setTimeout(() => {
			itemList.value.push({
				text: `此设备存在异常，请及时查看!`,
				code: `${props.fackObj.transformerSn}`,
				time: nowDate(),
				status: 0
			}, {
				text: `此设备存在异常，请及时查看!`,
				code: `${props.fackObj.transformerSn}`,
				time: nowDate(),
				status: 0
			})

			if (itemList.value.length>15) status = 'nomore';
			else status = 'loading';
		}, 2000)

	})

	onMounted(() => {
		itemList.value = [...props.fackList]

	})
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>

<style lang="scss">
	.newBox {
		padding: 32rpx 16rpx;
		box-sizing: border-box;

		.itemBox {
			&-item {
				margin-bottom: 24rpx;
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 16rpx;
				box-sizing: border-box;

				&-one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					position: relative;

					.errorText {
						flex: 95%;
						font-size: 28rpx;
						color: #333;

					}

					.errorD {
						flex: 5%;

						.dian {
							position: absolute;
							top: 5rpx;
							right: 5rpx;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background: #F63B2B;
						}

					}

				}

				&-two {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.code {
						font-size: 22rpx;
						color: #000;
						font-weight: 550;
					}

					.time {
						font-size: 18rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>